<template>
  <div class="my-button-box">
    <button
      :class="[size, type, disable ? 'disable' : '']"
      :disabled="disable"
      @click="fire"
    >
      <slot></slot>
    </button>
  </div>
</template>

<script>
export default {
  name: "MyButton",
  props: {
    size: {
      type: String,
      default: "small",
    },
    type: {
      type: String,
      default: "",
    },
    disable: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    fire() {
      // 通知：之前基于@click给实例事件中加入的自定义事件“名字:click”执行
      this.$emit("click", "呵呵呵");
    },
  },
};
</script>

<style lang="less" scoped>
.my-button-box {
  position: relative;

  button {
    border: none;
    background: #c0c4cc;
    color: #fff;
    font-size: 14px;
    cursor: pointer;

    &.small {
      padding: 5px 10px;
    }
    &.large {
      padding: 10px 20px;
      font-size: 16px;
    }

    &.primary {
      background: #409eff;
    }
    &.danger {
      background: #f56c6c;
    }
    &.waring {
      background: #e6a23c;
    }

    &.disable {
      background: #606266;
      color: #c0c4cc;
      cursor: initial;
    }
  }
}
</style>